<!--
 * @Author: xlm
 * @Date: 2021-07-05 11:15:38
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-08 13:45:57
 * @Description: 
-->
<template>
  <view class="address-picker">
    <view class="mask" :class="{ active: (mask && show) }" @click="maskClick" @touchmove.prevent @touchmove.stop="()=>{}"></view>
    <view class="content" :class="{ active: show }">
      <view class="btn-line">
        <view class="picker-btn" @click="close">取消</view>
        <view class="picker-btn" :style="'color: '+ackBtnColor" @click="ack">确定</view>
      </view>
      <picker-view style="height: 504rpx;" :value="value" :indicator-style="indicatorStyle"
       indicator-class="indicator-class"
       @change="changeIndex"
       >
        <picker-view-column>
          <view v-for="(item, index) in defaultData" :key="index" class="picker-item" :class="{active:curIndex===index}">{{ item.name }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'myPicker',
  props: {
    keyStr: {
      type: String,
      default: 'value' // 点击确定返回的实体：1:value、2:name、3:obj({value,name})
    },
    show: {
      type: Boolean,
      default: false // 点击显示地址选择弹窗
    },
    mask: {
      type: Boolean,
      default: true // 点击显示遮罩层
    },
    maskClose: {
      type: Boolean,
      default: true // 点击遮罩层是否关闭地址选择弹窗
    },
    defaultData: {
      type: Array,
      default() { // 默认值
        return ['110000', '110100', '110101']
      }
    },
    ackBtnColor: {
      type: String,
      default: 'rgb(0, 0, 0)' // 确认按钮颜色值
    }
  },
  data() {
    return {
      addressData: [],
      province: [],
      city: [],
      area: [],
      value: [],
      indicatorStyle: "height: 88rpx;line-height: 88rpx;font-size: 34rpx;",
      curIndex: 0
    }
  },
  watch: {
    show: function(newVal) {
      if (newVal) {
        
      }
    }
  },
  created() {
    
  },
  methods: {
    
    // 点击遮罩层关闭选择器
    maskClick() {
      if (this.maskClose) {
        this.close()
      }
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    // 确认
    ack() {
      this.$emit('confirm', this.curIndex)
    },
    // 改变
    changeIndex(e){
      console.log("e:", e.detail.value[0])
      this.curIndex = e.detail.value[0]
    }
  }
}
</script>
<style lang="scss">
.address-picker{
  .mask{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: z-index opacity 0.2s linear;

    &.active{
      opacity: 1;
      z-index: 99;
    }
  }
  .content{
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 999;
    transition: transform 0.2s linear;
    transform: translateY(120%);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .btn-line{
      @include flex;
      @include j-between;
      border-bottom: 1px solid #f2f2f2;
      box-shadow: 0 1px 2px #efefef;
      box-sizing: border-box;
      background: #F6F6F6;
      .picker-btn{
        color: #9BA0A7;
        font-size: 30rpx;
        line-height: 88rpx;
        padding: 0 34rpx;
        &:active{
          opacity: 0.8;
        }
      }
    }
    .picker-item{
      @include text-ellipsis;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
    }

    &.active {
      transform: translateY(0);
    }
    .indicator-class{
      height: 88rpx;
      line-height: 88rpx;
      font-size: 34rpx !important;
      color: red !important;
    }
    .picker-item.active{
      height: 88rpx;
      line-height: 88rpx;
      font-size: 34rpx;
      // color: red !important;
    }
  }
}
</style>
